import React, { Component } from 'react';
import {GlobalStyle} from './style';
import {BrowserRouter,Route} from "react-router-dom";
import {FontStyle} from './statics/iconfont/iconfont';
import Header  from './common/header/index';
import {Provider} from 'react-redux';
import store from './store';
import Home from './pages/home/index';
import Login from './pages/login/index';
import Write from './pages/write/index';
import Detail from './pages/detail/loadable';
class App extends Component {
  render() {
    return (

      <Provider store={store}>
        <GlobalStyle/>
        <FontStyle/>
          <BrowserRouter>
            <Header />
              <div>
                <Route path='/' exact component={Home}></Route>
                <Route path='/login' exact component={Login}></Route>
                <Route path='/write' exact component={Write}></Route>
                {/*当detail组件不是导入的index，获取 id 可能会报错。解决方法： 使用 withRouter*/}
                <Route path='/detail/:id' exact component={Detail}></Route>
              </div>
          </BrowserRouter>
      </Provider>

    );
  }
}

export default App;

// BrowserRouter HashRouter区别
// HashRouter  url地址栏上有 #    BrowserRouter则没有